<template>
    <el-dialog title="增加用户" :visible.sync="dialogData.visible"
               width="45%" @close="closeDialog">
      <el-form :model="user" :rules="userRules" :inline="true" ref="addUserForm">
        <el-form-item label="密码" prop="password" label-width="80px">
          <el-input v-model="user.password" size="mini" clearable placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="username" label-width="80px">
          <el-input v-model="user.username" size="mini" clearable placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex" label-width="80px">
          <el-select v-model="user.sex" size="mini" clearable placeholder="请选择性别">
            <el-option
                    v-for="s in sex"
                    :key="s.value"
                    :label="s.text"
                    :value="s.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄" prop="age" label-width="80px">
          <el-input v-model.number="user.age" size="mini" clearable placeholder="请输入年龄"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone" label-width="80px">
          <el-input v-model="user.phone" size="mini" clearable placeholder="请输入手机号码"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog" size="small">取 消</el-button>
        <el-button type="primary" @click="saveUser" size="small">保 存</el-button>
      </div>
    </el-dialog>
  </template>
  
  <script>
import { userAdd } from '@/api/user';

    export default {
      name: "UserDialog",
      props: ['dialogData'],
      data() {
        return {
          user: {
            payment: '',
            password: '',
            username: '',
            sex: '',
            age: '',
            phone: '',
          },
          sex:[
            {value:'男',text:'男'},
            {value:'女',text:'女'},
          ],
          userRules:{
            password: [
              {required: true, message: '请输入密码', trigger: 'blur'},
              {min: 6, max: 20, message: '密码长度只能在6-20个字符之间', trigger: 'blur'},
              {validator: this.checkPassword, trigger: 'blur'}
            ],
            username: [
              {required: true, message: '请输入姓名', trigger: 'blur'},
              {min: 2, max: 20, message: '姓名长度只能在2-20个字符之间', trigger: 'blur'}
            ],
            sex: [
              {required: true, message: '请选择性别', trigger: 'blur'}
            ],
            age: [
              {validator: this.checkAge, trigger: 'blur'}
            ],
            phone: [
              {required: true, message: '请输入手机号码', trigger: 'blur'},
              {validator: this.checkPhone, trigger: 'blur'}
            ],
            payment: [
              {required:true,message:'请选择支付方式',trigger:'blur'}
            ],

          },
        }
      },
      methods:{
        saveUser: function () {
          userAdd(
                    this.user
                ).then((res)=>{
                  if(res.msg=='OK'){
                    this.$message.success('新增成功！')
                    this.closeDialog()
                  }else {this.$message.error(res.msg)}
                 }) 
        },
        closeDialog: function () {
          this.user = {
            payment: '',
            password: '',
            username: '',
            sex: '',
            age: '',
            phone: '',
          }
          this.$refs['addUserForm'].resetFields();
          this.dialogData.visible = false;
        },

        checkAge: function (rule, value, callback) {
          if(value === '') {
            callback();
            return;
          }
          if(!Number.isInteger(value)){//不是数字
            callback(new Error("年龄必须是整数"))
          } else {
            if(value < 18){
              callback(new Error("年龄必须满18周岁"))
            } else {
              callback();
            }
          }
        },
        checkPhone: function (rule, value, callback) {
          let regex = /1[3-9][0-9]{9}/;
          if(regex.test(value)){
            callback()
          } else {
            callback(new Error("手机号码格式不正确"))
          }
        },
      }
    }
  </script>
  
  <style scoped>
  
  </style>